<template>
  <div class="comList">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, index) in companyLists"
        :key="index"
        @click="$router.push(`/companyDetail/${item.id}`)"
      >
        <template #title>
          <div class="myBox">
            <img :src="`http://47.106.228.28:1337${item.logo}`" alt="" />
            <div class="detail">
              <div class="comName">
                {{ item.name }}
                <span class="comScore">{{ item.score }}分</span>
              </div>
              <div class="comArea">
                <span>{{ item.region }}</span>
                <span>{{ item.distance }}</span>
              </div>
              <div class="comInfo">
                <span>{{item.type}}</span>
                <span>{{item.step}}</span>
                <span>{{item.scale}}</span>
              </div>
              <div class="job">
                <span>在招职位</span>
                <span class="jobCount">{{item.positions}}</span>
                <span> / 最后更新时间 : </span>
                <span class="jobTime">&nbsp;{{item.updated_at | formatTime}}</span>
              </div>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
export default {
  props: ['companyLists'],
  data () {
    return {
      loading: false,
      finished: false
      /*       v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad" */
    }
  },
  methods: {
    onLoad () {
      console.log('正在下拉加载')
    }
  }
}
</script>

<style lang="less" scoped>
.comList {
  margin-top: 20px;
  margin-bottom: 50px;
  // .van-cell__title
  // display: flex;
  .myBox {
    display: flex;
    img {
      // display: inline-block;
      width: 50px;
      height: 50px;
      // width: 100%;
      border-radius: 50%;
    }
    .detail {
      margin-left: 10px;
      font-size: 12px;
      .comArea,
      .comInfo {
        span {
          margin-right: 5px;
        }
      }
      .comName {
        position: relative;
        font-size: 18px;
        color: #19232b;
        font-weight: 600;
        .comScore {
          // display: block;
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 12px;
          font-weight: normal;
        }
      }
      .comInfo {
        font-weight: 400;
        color: #b4b4bd;
        span {
          display: inline-block;
          height: 18px;
          line-height: 18px;
          padding: 0 5px;
          background-color: #eeeeee;
        }
      }
      .job {
        color: #b4b4bd;
        .jobCount {
          color: #00b8d4;
        }
      }
    }
  }
}
</style>
